<template>
  <div class="settings">
    <van-cell-group title="系统设置">
      <van-cell title="基础设置" is-link @click="goToBasicSettings" />
      <van-cell title="通知设置" is-link @click="goToNotificationSettings" />
      <van-cell title="隐私设置" is-link @click="goToPrivacySettings" />
    </van-cell-group>
    
    <van-cell-group title="关于我们">
      <van-cell title="版本信息" :value="version" />
      <van-cell title="检查更新" is-link @click="checkUpdate" />
      <van-cell title="用户反馈" is-link @click="userFeedback" />
    </van-cell-group>
    
    <van-cell-group title="账户操作">
      <van-cell title="修改密码" is-link @click="changePassword" />
      <van-cell title="退出登录" is-link @click="logout" />
    </van-cell-group>
    
    <!-- 修改密码弹窗 -->
    <van-popup 
      v-model:show="showPasswordModal" 
      position="bottom" 
      :style="{ height: '60%' }"
      round
    >
      <van-form @submit="onSubmitPassword">
        <van-nav-bar
          title="修改密码"
          left-text="取消"
          right-text="保存"
          @click-left="showPasswordModal = false"
          @click-right="onSubmitPassword"
        />
        
        <div class="form-content">
          <van-cell-group inset>
            <van-field
              v-model="passwordForm.oldPassword"
              type="password"
              name="原密码"
              label="原密码"
              placeholder="请输入原密码"
              :rules="[{ required: true, message: '请填写原密码' }]"
            />
            <van-field
              v-model="passwordForm.newPassword"
              type="password"
              name="新密码"
              label="新密码"
              placeholder="请输入新密码"
              :rules="[{ required: true, message: '请填写新密码' }]"
            />
            <van-field
              v-model="passwordForm.confirmPassword"
              type="password"
              name="确认密码"
              label="确认密码"
              placeholder="请再次输入新密码"
              :rules="[{ required: true, message: '请再次输入新密码' }]"
            />
          </van-cell-group>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'

const router = useRouter()
const version = ref('v1.0.0')
const showPasswordModal = ref(false)

const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const goToBasicSettings = () => {
  showToast('基础设置功能待开发')
}

const goToNotificationSettings = () => {
  showToast('通知设置功能待开发')
}

const goToPrivacySettings = () => {
  showToast('隐私设置功能待开发')
}

const checkUpdate = () => {
  showToast('当前已是最新版本')
}

const userFeedback = () => {
  showToast('用户反馈功能待开发')
}

const changePassword = () => {
  showPasswordModal.value = true
}

const logout = () => {
  showDialog({
    title: '确认退出',
    message: '确定要退出登录吗？',
    showCancelButton: true
  }).then(() => {
    router.push('/login')
  }).catch(() => {
    // 取消操作
  })
}

const onSubmitPassword = () => {
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    showToast('两次输入的新密码不一致')
    return
  }
  
  // 这里应该调用修改密码的API
  showToast('密码修改成功')
  showPasswordModal.value = false
  resetPasswordForm()
}

const resetPasswordForm = () => {
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}
</script>

<style scoped>
.settings {
  padding-bottom: 20px;
}

.form-content {
  padding-top: 46px;
}
</style>